<template>
  <div class="search"></div>
  <!-- 第一张 -->
  <div class="echart">
    <Chart :width=store.echarts41.width :height=store.echarts41.height :options="store.echarts41.options"></Chart>
    <div class="table">
      <div class="more">
        <el-button>
          更多<el-icon class="el-icon--right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </el-icon>
        </el-button>
      </div>
      <el-table :data="tableData" stripe>
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="kehu" label="新增客户" width="150" />
        <el-table-column prop="zhanbi" label="新增占比" />
        <el-table-column prop="count" label="跟进次数" />
      </el-table>
    </div>
  </div>
  <!-- 第二张 -->
  <div class="echart">
    <Chart :width=store.echarts412.width :height=store.echarts412.height :options="store.echarts412.options"></Chart>
    <div class="table">
      <div class="more">
        <el-button>
          更多<el-icon class="el-icon--right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </el-icon>
        </el-button>
      </div>
      <el-table :data="tableData2" stripe>
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="kehu" label="新增客户" width="150" />
        <el-table-column prop="zhanbi" label="新增占比" />
        <el-table-column prop="count" label="跟进次数" />
        <el-table-column prop="cj" label="成交次数" />
      </el-table>
    </div>
  </div>
  <!-- 第三张 -->
  <div class="echart">
    <Chart :width=store.echarts413.width :height=store.echarts413.height :options="store.echarts413.options"></Chart>
    <div class="table">
      <div class="more">
        <el-button>
          更多<el-icon class="el-icon--right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </el-icon>
        </el-button>
      </div>
      <el-table :data="tableData3" stripe>
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="kehu" label="新增客户" width="150" />
        <el-table-column prop="zhanbi" label="新增占比" />
        <el-table-column prop="count" label="跟进次数" />
      </el-table>
    </div>
  </div>
  <!-- 第四张 -->
  <div class="echart">
    <Chart :width=store.echarts414.width :height=store.echarts414.height :options="store.echarts414.options"></Chart>
    <div class="table">
      <div class="more">
        <el-button>
          更多<el-icon class="el-icon--right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </el-icon>
        </el-button>
      </div>
      <el-table :data="tableData4" stripe>
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="kehu" label="新增客户" width="150" />
        <el-table-column prop="zhanbi" label="新增占比" />
        <el-table-column prop="count" label="跟进次数" />
      </el-table>
    </div>
  </div>
  <!-- 第五张 -->
  <div class="echart">
    <Chart :width=store.echarts415.width :height=store.echarts415.height :options="store.echarts415.options"></Chart>
    <div class="table">
      <div class="more">
        <el-button>
          更多<el-icon class="el-icon--right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </el-icon>
        </el-button>
      </div>
      <el-table :data="tableData5" stripe>
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="kehu" label="新增客户" width="150" />
        <el-table-column prop="zhanbi" label="新增占比" />
        <el-table-column prop="count" label="跟进次数" />
      </el-table>
    </div>
  </div>
  <div class="reg">
    <p>Copyright © www.AxureUX.com, All Rights Reserved.</p>
    <p>专业的交互原型素材原创分享平台</p>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Chart from '../../components/MyEcharts'
import { useStore } from '../../store/zsz/index'
const store = useStore()
const tableData = [
  {
    name: '了解产品',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
  },
  {
    name: '正在跟进',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
  },
  {
    name: '正在试用',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
  },
  {
    name: '准备购买',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
  },
  {
    name: '准备付款',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
  },
  {
    name: '已经购买',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
  },
  {
    name: '暂时搁置',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
  }
]
const tableData2 = [
  {
    name: '★☆☆☆☆',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '★★☆☆☆',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '★★★☆☆',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '★★★★☆',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '★★★★★',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  }

]
const tableData3 = [
  {
    name: '电话营销',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '主动来电',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '客户介绍',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '朋友介绍',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '独立开发',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '网络搜索',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '广告杂志',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  }
]
const tableData4 = [
  {
    name: '北京',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '广州',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '上海',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '深圳',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '天津',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '武汉',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '重庆',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  }
]
const tableData5 = [
  {
    name: '家用电器',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '交通运输',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '商务服务',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '家居用品',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '电工电器',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '数码产品',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  },
  {
    name: '通信产品',
    kehu: 1000,
    zhanbi: '10%',
    count: '1000',
    cj: '1000',
  }
]





</script>

<style lang='scss' scoped>
.search {
  height: 110px;
  background-color: white;
}

.echart {
  height: 440px;
  background-color: white;
  margin: 14px 0;
  display: flex;
  justify-content: space-between;

  .table {
    flex: 1;
    padding-right: 20px;
    width: 100%;


    .more {
      padding-top: 20px;
      height: 60px;
      text-align: right;
    }
  }
}



.reg {
  text-align: center;
  color: #cccccc;
  padding-top: 30px;
  margin-top: 20px;
  height: 140px;
  font-size: 14px;
}
</style>